<template>
  <div class="container">
    <TitleTop
      v-if="type == 0"
      :magnetData="magnetData"
      :mType="mType"
      :magnetStyle="magnetStyle"
      :magnetShortStyle="magnetShortStyle"
    />
    <TitleLeft
      v-else-if="type == 1"
      :magnetData="magnetData"
      :mType="mType"
      :groupStyle="groupStyle"
      :magnetStyle="magnetStyle"
      :magnetShortStyle="magnetShortStyle"
    />
    <TitleMenu v-else :magnetData="magnetData" :contentWidth="contentWidth" />
  </div>
</template>

<script>
  import TitleTop from './title-top.vue';
  import TitleLeft from './title-left.vue';
  import TitleMenu from './title-menu.vue';
  export default {
    name: 'MagnetGroup',
    components: {
      TitleTop,
      TitleLeft,
      TitleMenu,
    },
    props: {
      sectionData: {
        type: Object,
        // default: function() {
        // 	return {
        // 		options: {
        // 			type: 2,
        // 			Mtype: 2,
        // 			groupStyle: {},
        // 			magnetStyle: {}
        // 		},
        // 		data: []
        // 	}
        // }
      },
      contentWidth: {
        type: Number,
        default: 1400,
      },
    },
    computed: {
      type() {
        return this.sectionData.options.type || 0;
      },
      mType() {
        return this.sectionData.data.propertyMap.iconType || '0';
      },
      magnetShortStyle() {
        return this.sectionData.data.propertyMap.shortcutStyle || 'icon';
      },
      //分组中分组置顶的不能设置样式
      groupStyle() {
        return this.sectionData.options.groupStyle;
      },
      // 拿到磁贴的数据做处理
      magnetData() {
        let i = 0;
        let magnet = this.sectionData.data.propertyMap.data;
        magnet.forEach((item) => {
          item.portlets.forEach((item1) => {
            item1.bgColor =
              item1.bgColor == null
                ? this.sectionData.options.magnetStyle.magnetBgc[i]
                : item1.bgColor;
            item1.fontColor =
              item1.fontColor == null
                ? this.sectionData.options.magnetStyle.fontColor
                : item1.fontColor;
            item1.iconColor =
              item1.iconColor == null
                ? this.sectionData.options.magnetStyle.iconColor
                : item1.iconColor;
            if (this.sectionData.options.magnetStyle.magnetBgc.length != 1) {
              i++;
            }
          });
        });
        return magnet;
      },
      // 还有一些磁贴样式
      magnetStyle() {
        // console.log(this.sectionData);
        return {
          ...this.sectionData.options.magnetStyle,
          propertyMap: this.sectionData.data.propertyMap,
        };
      },
    },
  };
</script>

<style scoped>
  .container {
    width: 100%;
    height: 100%;
  }
</style>
